<template>
    <div class="box" ref="map">
    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import chinaJson from './China.json'
const map = ref()

echarts.registerMap('china', chinaJson)
onMounted(() => {
    const mycharts = echarts.init(map.value)
    mycharts.setOption({
        geo: {
            map: 'china',
            top: 220,
            zoom: 1.5,
            label: {
                show: true,
                color: 'white',
            },
            itemStyle: {
                // color: '#007afe',
                color: {
                    type: 'linear',
                    x: 0.2,
                    y: 0.1,
                    x2: 0.8,
                    y2: 0.9,
                    colorStops: [{
                        offset: 0, color: '#007afe' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#11144e' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }

            }
        },
        grid: {
            top: 0,
            left: 0,
            right: 0,
            bottom: 0
        },
        series: [
            {
                type: 'lines',
                data: [
                    {
                        coords: [
                            [116.405285, 39.904989],
                            [120.153576, 30.287459]
                        ],
                        lineStyle: {
                            width: 4,
                            color: 'white',
                        }
                    },
                    {
                        coords: [
                            [120.153576, 30.287459],
                            [116.405285, 39.904989],
                        ],
                        lineStyle: {
                            width: 4,
                            color: 'white',
                        }
                    },
                    {
                        coords: [
                            [117.283042, 31.86119],
                            [113.429919, 23.334643]
                        ],
                        lineStyle: {
                            width: 4,
                            color: 'white',
                        }
                    },
                    {
                        coords: [
                            [104.065735, 30.659462],
                            [120.153576, 30.287459]
                        ],
                        lineStyle: {
                            width: 4,
                            color: 'white',
                        }
                    },
                    {
                        coords: [
                            [102.712251, 25.040609],
                            [91.132212, 29.660361]
                        ],
                        lineStyle: {
                            width: 4,
                            color: 'white',
                        }
                    },
                    {
                        coords: [
                            [102.712251, 25.040609],
                            [110.243135, 34.725641]
                        ],
                        lineStyle: {
                            width: 4,
                            color: 'white',
                        }
                    },
                    {
                        coords: [
                            [120.153576, 30.287459],
                            [87.617733, 43.792818]
                        ],
                        lineStyle: {
                            width: 4,
                            color: 'white',
                        }
                    },
                    {
                        coords: [
                            [120.153576, 30.287459],
                            [103.823557, 36.058039]
                        ],
                        lineStyle: {
                            width: 4,
                            color: 'white',
                        }
                    }
                ],
                effect: {
                    show: true,
                    symbol: 'arrow',
                    symbolSize: 10,
                    color: 'skyblue'
                }
            }
        ]
    })
})
</script>

<style scoped lang="scss">
.box {
    width: 100%;
    height: 100%;
}
</style>